<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
	</head>
	<body>
		<div id="section_container">
			<section id="slider_section" data-role="section" class="active">
				<header>
		            <div class="titlebar">
		            	<a class="left" data-toggle="back" href="#">
		                    <i class="icon icon-arrowleft"></i>
		                </a>
		                <h1 class="text-center">滑动组件</h1>
		            </div>
		             <div id="tabbarOuter" data-scroll="horizontal">
				    	<div class="scroller" style="width:500px;">
				            <ul class="slidebar">
				                <li class="tab active" data-role="tab" href="#page1" data-toggle="page">
				                    <label class="tab-label">头条</label>
				                </li>
				                <li class="tab" data-role="tab" href="#page2" data-toggle="page">
				                    <label class="tab-label">推荐</label>
				                </li>
				                <li class="tab" data-role="tab" href="#page3" data-toggle="page">
				                    <label class="tab-label">科技</label>
				                </li>
				                <li class="tab" data-role="tab" href="#page4" data-toggle="page">
				                    <label class="tab-label">舆情</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">动态</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">国内</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">国际</label>
				                </li>
				            </ul>
						</div>
					</div>
		        </header>
				<article  data-role="article" id="slider_article" class="active" style="top:88px;bottom:54px;">
					<div id="sliderPage" data-role="slider" class="full">
						<div class="scroller">
							<div id="page1" class="slide" data-role="page" data-scroll="pulldown">
								<div class="scroller">
									<div id="slide" data-role="slider" class="full" style="overflow: hidden; height:230px;">
										<div class="scroller">
											<div class="slide">
												<img data-source="../assets/app/img/slide1.jpg" class="full-width"/>
												<div class="slider_label">综合新闻</div>
											</div>
											<div class="slide">
												<img data-source="../assets/app/img/slide2.jpg" class="full-width"/>
												<div class="slider_label">综合新闻</div>
											</div>
											<div class="slide">
												<img data-source="../assets/app/img/slide3.jpg" class="full-width"/>
												<div class="slider_label">综合新闻</div>
											</div>
										</div>
									</div>

								
									<details open>
						                <summary class="sliver">用法</summary>
						                <ul class="list">
						                	<li>
						                        <div class="justify-content">
						                            <p>需要在页面中引入iscroll-probe.js</p>
						                        </div>
						                    </li>
						                    <li>
						                        <div class="justify-content">
						                            <p>Silder组件不会自动初始化，可以使用A.Slider(#id, opts)方式调用</p>
						                        </div>
						                    </li>
						            	</ul>
						            </details>
						            
						            <details open>
						                <summary class="sliver">opts说明</summary>
						                <ul class="list">
						                    <li>
						                        <div class="justify-content">
						                            <p>opts对象包括：auto、dots和change三个参数</p>
						                        </div>
						                    </li>
						                    <li>
						                        <div class="justify-content">
						                            <p>auto：true|false|number，是否自动播放，默认false</p>
						                        </div>
						                    </li>
						                    <li>
						                        <div class="justify-content">
						                            <p>dots：center|left|right|hide，焦点的位置，默认center</p>
						                        </div>
						                    </li>
						                    <li>
						                        <div class="justify-content">
						                            <p>change：函数，slider切换后的回调函数，默认接受参数为当前slide的位置</p>
						                        </div>
						                    </li>
						                </ul>
						            </details>
						            
						            <details open>
						                <summary class="sliver">监听事件</summary>
						                <ul class="list">
						                    <li>
						                        <div class="justify-content">
						                            <p>目前仅对.slide样式元素可以触发事件：slidershow和sliderhide</p>
						                        </div>
						                    </li>
						                    <li>
						                        <div class="justify-content">
						                            <p>当某个.slide元素显示的时候触发slidershow事件，当隐藏的时候触发sliderhide事件</p>
						                        </div>
						                    </li>
						                </ul>
						            </details>
						    	</div>
							</div>
							<div id="page2" class="slide" data-role="page" data-scroll="verticle">
								<div class="scroller">
									这是第2个page
							    </div>
							</div>
							<div id="page3" class="slide" data-role="page" data-scroll="verticle">
								<div class="scroller">
									这是第3个page
							    </div>
							</div>
							<div id="page4" class="slide" data-role="page" data-scroll="verticle">
								<div class="scroller">
								这是第4个page
						    	</div>
							</div>
						</div>
					</div>
				</article>
				<footer>
					<ul class="menubar">
		                <li class="tab active" data-role="tab" href="#page1" data-toggle="page">
		                    <i class="icon icon-home-fill"></i>
		                    <label class="tab-label">头条</label>
		                </li>
		                <li class="tab" data-role="tab" href="#page2" data-toggle="page">
		                    <i class="icon icon-chattip"></i>
		                    <label class="tab-label">推荐</label>
		                </li>
		                <li class="tab" data-role="tab" href="#page3" data-toggle="page">
		                    <i class="icon icon-contact"></i>
		                    <label class="tab-label">科技</label>
		                </li>
		                <li class="tab" data-role="tab" href="#page4" data-toggle="page">
		                    <i class="icon icon-app"></i>
		                    <label class="tab-label">舆情</label>
		                </li>
		            </ul>
				</footer>
			</section>
		</div>

		
		<!--- third -->
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<!---  agile -->
		<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
		<!-- app -->
		<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
		<script>
		
		$('#slider_section').on('sectionshow', function(){
			A.Component.scroll('#tabbarOuter');
		});
		$('#slider_article').on('articleload', function(){
			A.Slider('#slide', {
				dots : 'right'
			});			
			A.Slider('#sliderPage', {
				dots : 'hide'
			});
		});
		$('#slide img').on(A.options.clickEvent, function(){
			//var $el = $(this);
			//A.showToast($el.siblings('.slider_label').html());
			A.Component.pictureShow({
				id : 'picture',
				index : $("#slide .slide").index($("#slide .slide.active")),
				title : '这是默认标题',
				list : [
					{
						imgURL : '../assets/app/img/slide1.jpg',
						content : '这是第一条新闻'
					},
					{
						imgURL : '../assets/app/img/slide2.jpg',
						content : '这是第二条新闻'
					},
					{
						imgURL : '../assets/app/img/slide3.jpg',
						content : '这是第三条新闻'
					}
				]
			});
		});
		</script>
	</body>
</html>